<template>
  <div
    class="fragment"
    @dblclick="isEdit = true"
    @contextmenu="onClickContext"
    @keypress="onKyePress"
  >
    <div
      v-if="!isEdit"
      class="name"
      :value="name"
    >
      {{ name }}
    </div>
    <input
      v-else
      ref="inputRef"
      v-model="localName"
      class="is-edit"
      type="text"
    >
  </div>
</template>

<script setup lang="ts">
import { computed, nextTick, ref, watch } from 'vue'
import { useSnippetStore } from '@/store/snippets'
import { onClickOutside, useDebounceFn } from '@vueuse/core'
import { ipc } from '@/electron'
import { track } from '@/services/analytics'
import type {
  ContextMenuRequest,
  ContextMenuResponse
} from '@shared/types/main'

interface Props {
  name: string
  index: number
}

const props = defineProps<Props>()

const snippetStore = useSnippetStore()

const isEdit = ref(false)

const inputRef = ref<HTMLInputElement>()

const localName = computed({
  get: () => props.name,
  set: useDebounceFn(v => {
    snippetStore.patchCurrentSnippetContentByKey('label', v)
  }, 300)
})

onClickOutside(inputRef, async () => {
  isEdit.value = false
  if (!props.name) {
    snippetStore.patchCurrentSnippetContentByKey('label', 'Untitled fragment')
  }
})

const onClickContext = async () => {
  const { action } = await ipc.invoke<ContextMenuRequest, ContextMenuResponse>(
    'context-menu:snippet-fragment',
    {
      name: props.name,
      type: 'folder'
    }
  )

  if (action === 'rename') {
    isEdit.value = true
  }

  if (action === 'delete') {
    await snippetStore.deleteCurrentSnippetFragmentByIndex(props.index)
    snippetStore.fragment = snippetStore.fragmentCount! - 1
    track('snippets/delete-fragment')
  }
}

const onKyePress = (e: KeyboardEvent) => {
  if (e.code === 'Enter') isEdit.value = false
}

watch(isEdit, () => {
  nextTick(() => inputRef.value?.select())
})
</script>

<style lang="scss" scoped>
.fragment {
  width: 100%;
  text-overflow: ellipsis;

  input {
    background-color: transparent;
    width: 100%;
    border: 0;
    outline: none;
    min-width: 100px;
    &.is-edit {
      background-color: #fff;
    }
  }
}
.name {
  user-select: none;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
